<template>
	<view :style="viewColor">
		<form report-submit='true'>
			<view class='merchantsSettled'>
				<view class='list'>
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500">名称</text>
							<input type="text" maxlength="30" placeholder="请输入好货名称" v-model="data.title"
							 placeholder-class='placeholder' />
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500">关键词</text>
							<input type="text" placeholder="请输入好货关键词" v-model="data.keywords"
							 placeholder-class='placeholder' />
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500">简介</text>
							<input type="text" placeholder="请输入好货简介" v-model="data.description"
							 placeholder-class='placeholder' />
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500">价格</text>
							<input type="number" placeholder="请输入好货价格" v-model="data.attr[0].price"
							 placeholder-class='placeholder' />
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500">原价</text>
							<input type="number" placeholder="请输入好货原价" v-model="data.attr[0].original_price"
							 placeholder-class='placeholder' />
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500">库存</text>
							<input type="number" placeholder="请输入好货库存" v-model="data.attr[0].stock"
							 placeholder-class='placeholder' />
						</view>
					</view>
					<view class="item no-border">
						<view class='acea-row row-middle'>
							<text class="item-title font-size36-500">缩略图</text>
							<view class="upload">
								<view class='pictrue' @click="getPhotoClickIdx('thumb')" v-if="data.thumb">
									<image :src='data.thumb'></image>
									<text class='iconfont icon-guanbi1' @click.stop='DelPic("thumb")'></text>
								</view>
								<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic("thumb")' v-if="!data.thumb">
									<text class='iconfont icon-jia'></text>
									<!-- <view>上传图片</view> -->
								</view>
							</view>
						</view>
					</view>
					<view class="item no-border">
						<view class='acea-row row-middle' style="display: block;">
							<text class="item-title font-size36-500">请上传商品详情图片</text>
							<text class="item-desc">(图片最多可上传3张,图片格式支持JPG、PNG、JPEG)</text>
							<view class="upload">
								<view class='pictrue' v-for="(item,index) in data.pics" :key="index" :data-index="index" @click="getPhotoClickIdx('pics', index)">
									<image :src='item'></image>
									<text class='iconfont icon-guanbi1' @click.stop='DelPic("pics", index)'></text>
								</view>
								<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic("pics")' v-if="data.pics.length < 3">
									<text class='iconfont icon-icon25201'></text>
									<view>上传图片</view>
								</view>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500">好货类型</text>
							<radio-group class="radio-flex" @change="bindRadioChange1">
								<view><radio name="type" value="0" :checked="data.type == 0"></radio>好货</view>
								<view><radio name="type" value="1" :checked="data.type == 1"></radio>55折</view>
							</radio-group>
						</view>
					</view>
					
					<button class='submitBtn on' @click="formSubmit">立即发布</button>
				</view>
			</view>
		</form>
		<view class='loadingicon acea-row row-center-wrapper' v-if="loading">
			<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
		</view>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>
<script>
	import {
		editCircle,
		getUserCircle,
	} from "@/api/circle";
	import {
		editUserProduct,
		getUserProductDetail
	} from "@/api/user_product"
	import { getGeocoder } from '@/api/store.js';
	import { mapGetters } from "vuex";
	import { configMap } from "@/utils";
	import parser from "@/components/jyf-parser/jyf-parser";
	import authorize from '@/components/Authorize';
	import areaWindow from '@/components/areaWindow';
	import { HTTP_REQUEST_URL } from '@/config/app';
	const app = getApp();
	export default {
		components: {
			areaWindow,
			"jyf-parser": parser,
			authorize,
		},
		data() {
			return {
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				disabled: false,
				loading: false,
				validate: true,
				index: 0,
				mer_storeType: '',
				id: 0,
				data:{
					title: '',
					keywords: '',
					description: '',
					thumb: '',
					pics: [],
					type: 0,
					attr: [
						{
							name: '默认',
							stock: 0,
							price: 0,
							original_price: 0
						}
					]
				},
				display: false,
				multiArray:[],
			};
		},
		beforeDestroy() {
		},
		computed: {...configMap({sys_intention_agree:''},mapGetters(['isLogin','viewColor','keyColor']))
		},
		onLoad(options) {
			if (this.isLogin) {
				if(options.id) {
					this.id = options.id
					this.getUserProductInfo(options.id);
					uni.setNavigationBarTitle({
						title: '编辑好货'
					})
				}
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}
		},
		onShow() {},
		onReady() {},
		methods: {
			/**
			 * 获取人脉圈信息
			 */
			getUserProductInfo: function(id) {
				let that = this;
				getUserProductDetail(id, {}).then(res => {
					let data = {
						id: id,
						title: res.data.title,
						keywords: res.data.keywords,
						description: res.data.description,
						thumb: res.data.thumb,
						pics: res.data.pics,
						type: res.data.type,
						attr: res.data.attr
					}
					that.data = data;
					that.$set(that, 'data', that.data);
				});
			},
			bindRadioChange1(e) {
				this.data.type = e.detail.value;
				this.$set(this, 'data', this.data);
			},
			// 图片预览
			// 获得相册 idx
			getPhotoClickIdx(type, index) {
				let _this = this,
					img = '';
				if(type == 'thumb'){
					img = _this.data.thumb;
					_this.imgPreview(img)
				}else if(type == 'pics'){
					_this.imgPreview2(_this.data.pics, index);
				}
				
			},
			// 图片预览
			imgPreview: function(img) {
				// list：图片 url 数组
				if (img) {
					uni.previewImage({
						// current: 0, //  传 Number H5端出现不兼容
						urls: [img]
					});
				}
			},
			// 图片预览
			imgPreview2: function(list, idx) {
				// list：图片 url 数组
				if (list && list.length > 0) {
					uni.previewImage({
						current: list[idx], //  传 Number H5端出现不兼容
						urls: list
					});
				}
			},
			// 授权回调
			onLoadFun: function() {
				this.isShowAuth = false;
				return uni.switchTab({
					url: '/pages/user/index'
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			/**
			 * 上传文件
			 *
			 */
			uploadpic: function(type) {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					if(type == 'thumb') {
						that.data.thumb = res.data.path;
					}else if(type == 'pics') {
						that.data.pics.push(res.data.path);
					}
					that.$set(that, 'data', that.data);
				});
			},
			/**
			 * 删除图片
			 *
			 */
			DelPic: function(type, index) {
				let that = this,
					data = this.data;
				if(type == 'thumb') {
					data.thumb = '';
				}else if(type == 'pics') {
					data.pics.splice(index, 1);
				}
				that.data = data;
				that.$set(that, 'data', that.data);
			},
			formSubmit: function(e) {
				let that = this,
				data = this.data;
				if (that.validateForm()) {
					editUserProduct(data).then(res => {
						if (res.status == 200) {
							console.log(res);
							that.$util.Tips({
								title: res.message
							}, {
								tab: 2,
								url: '/pages/extends/user_product/list'
							});
						}
					}).catch(res => {
						that.$util.Tips({
							title: res
						});
					})
				}
			},
			validateForm: function() {
				let that = this,
					value = that.data;
				if (!value.title) return that.$util.Tips({
					title: '请输入好货名称'
				});
				if (!value.keywords) return that.$util.Tips({
					title: '请输入好货关键词'
				});
				if (!value.description) return that.$util.Tips({
					title: '请输入好货简介'
				});
				if (!parseFloat(value.attr[0].price).toFixed(2)) return that.$util.Tips({
					title: '请输入好货价格'
				});
				if (!parseInt(value.attr[0].stock)) return that.$util.Tips({
					title: '请输入好货库存'
				});
				if (!value.thumb) return that.$util.Tips({
					title: '请上传好货缩略图'
				});
				return true;
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #FADC00!important;
	}
	::v-deepcheckbox .uni-checkbox-input.uni-checkbox-input-checked,
	::v-deepcheckbox .wx-checkbox-input.wx-checkbox-input-checked {
	  border: 1px solid var(--view-theme)!important;
	  background-color: var(--view-theme)!important;
	  color: #fff!important;
	}
	.uni-input-placeholder {
		color: #B2B2B2;
	}
	.item-name{
		width: 190rpx;
		/* font-size: 32rpx;
		font-weight: 500; */
		color: #323232;
		line-height: 44rpx;
	}
	.uni-list-cell {
		position: relative;
		.iconfont {
			font-size: 14px;
			color: #7a7a7a;
			position: absolute;
			right: 15px;
			top: 7rpx;
		}
		.icon-guanbi2{
			right: 35px;
		}
	}
	.merchantBgCount{
		line-height: 0;
	}
	.merchantsSettled .merchantBg {
		width: 750rpx;
		width: 100%;
	}
	.merchantsSettled .list {
		background-color: #fff;
		border-radius: 12px;
		padding: 22px 0;
		margin: 0 15px;
		position: absolute;
		top: 30rpx;
		width: calc(100% - 30px);
		
	}
	.application-record {
		position: absolute;
		display: flex;
		align-items: center;
		top: 240rpx;
		right: 0;
		color: #fff;
		font-size: 22rpx;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 8rpx 18rpx;
		border-radius: 20px 0px 0px 20px;
	}
	.merchantsSettled .list .item {
		padding: 50rpx 0 20rpx;
		border-bottom: 1px solid #eee;
		position: relative;
		margin: 0 20px;
		&.no-border {
			border-bottom: none;
			padding-left: 0;
			padding-right: 0;
		}
		.item-title {
			// font-size: 32rpx;
			// font-weight: 500;
			color: #323232;
			line-height: 44rpx;
			display: block;
		}
		.item-desc {
			color: #B2B2B2;
			font-size: 22rpx;
			display: block;
			margin-top: 9rpx;
			line-height: 36rpx;
		}
	}
	.acea-row,.upload {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
	.upload {
		// margin-top: 20rpx;
		margin-left: auto;
	}
	.acea-row.row-middle {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding-left: 2px;
	}
	.acea-row.row-column {
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.acea-row.row-center-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
	.merchantsSettled .list .item .pictrue {
		width: 130rpx;
		height: 130rpx;
		margin: 24rpx 22rpx 0 0;
		position: relative;
		font-size: 11px;
		color: #bbb;
		&:nth-child(4n) {
			margin-right: 0;
		}
		&:nth-last-child(1) {
			border: 0.5px solid #ddd;
			box-sizing: border-box;
		}
		uni-image,
		image {
			width: 100%;
			height: 100%;
			border-radius: 1px;
			img {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				width: 100%;
				height: 100%;
			}
		}
		.icon-guanbi1 {
			font-size: 33rpx;
			position: absolute;
			top: -10px;
			right: -10px;
		}
	}
	.uni-list-cell-db{
		position: relative;
	}
	.wenhao{
		width: 34rpx;
		height: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		border-radius: 50%;
		background: #E3E3E3;
		color: #ffffff!important;
		margin-left: 4rpx;
		position: absolute;
		left: 122rpx;
	}
	.merchantsSettled .list .item .imageCode {
		position: absolute;
		top: 7px;
		right: 0;
	}
	.merchantsSettled .list .item .icon {
		font-size: 40rpx;
		color: #b4b1b4;
	}
	.merchantsSettled .list .item input, .merchantsSettled .list .item textarea {
		width: 400rpx;
		font-size: 30rpx;
	}
	.merchantsSettled .list .item .placeholder {
		color: #b2b2b2;
	}
	.merchantsSettled .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}
	.merchantsSettled .default checkbox {
		margin-right: 15rpx;
	}
	.merchantsSettled .acea-row uni-image {
		width: 20px;
		height: 20px;
		display: block;
	}
	.merchantsSettled .list .item .codeIput {
		width: 125px;
	}
	.uni-input-input {
		display: block;
		height: 100%;
		background: none;
		color: inherit;
		opacity: 1;
		-webkit-text-fill-color: currentcolor;
		font: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		text-align: inherit;
		text-indent: inherit;
		text-transform: inherit;
		text-shadow: inherit;
	}
	.merchantsSettled .list .item .code {
		position: absolute;
		width: 93px;
		line-height: 27px;
		border: 1px solid var(--view-theme);
		border-radius: 15px;
		color: var(--view-theme);
		text-align: center;
		bottom: 8px;
		right: 0;
		font-size: 12px;
	}
	.merchantsSettled .list .item .code.on {
		background-color: #bbb;
		color: #fff;
		border-color: #bbb;
	}
	.merchantsSettled .submitBtn {
		width: 588rpx;
		margin: 0 auto;
		height: 86rpx;
		border-radius: 25px;
		text-align: center;
		line-height: 86rpx;
		font-size: 15px;
		background: #E3E3E3;
		margin-top: 25px;
		pointer-events: none;
	}
	.merchantsSettled .submitBtn.on {
		background: var(--view-theme);
			pointer-events: all;
	}
	uni-checkbox-group,
	.settleAgree {
		display: inline-block;
		font-size: 24rpx;
	}
	uni-checkbox-group {
		color: #b2b2b2;
	}
	.settleAgree {
		color: var(--view-theme);
		position: relative;
		top: 2px;
		left: 8px;
	}
	.merchantsSettled uni-checkbox .uni-checkbox-wrapper {
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid #C3C3C3;
		border-radius: 15px;
	}
	.settlementAgreement {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 10;
	}
	.settlementAgreement .setAgCount {
		background: #fff;
		width: 656rpx;
		height: 458px;
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 12rpx;
		-webkit-border-radius: 12rpx;
		padding: 52rpx;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		overflow: hidden;
		.content {
			height: 900rpx;
			overflow-y: scroll;
			::v-deep p {
				font-size: 13px;
				line-height: 22px;
			}
			::v-deep img {
				max-width: 100%;
			}
		}
	}
	.settlementAgreement .setAgCount .icon {
		font-size: 42rpx;
		color: #b4b1b4;
		position: absolute;
		top: 15rpx;
		right: 15rpx;
	}
	.settlementAgreement .setAgCount .title {
		color: #333;
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
	}
	.settlementAgreement .setAgCount .content {
		margin-top: 32rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 22px;
		text-align: justify;
		text-justify: distribute-all-lines;
		height: 756rpx;
		overflow-y: scroll;
	}
	.settledSuccessMain {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #fff;
	}
	.settledSuccessful {
		flex: 1;
		width: 100%;
		padding: 0 56px;
		height: auto;
		background: #fff;
		text-align: center;
	}
	.settledSuccessful .image {
		width: 189px;
		height: 157px;
		margin-top: 66px;
	}
	.settledSuccessful .title {
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		margin-top: 35px;
	}
	.settledSuccessful .info {
		color: #A0A0A0;
		font-size: 13px;
		margin-top: 12px;
	}
	.settledSuccessful .goHome {
		margin: 60px auto 0;
		line-height: 43px;
		color: #282828;
		font-size: 15px;
		border: 1px solid #B4B4B4;
		border-radius: 60px;
	}
	::v-deep uni-checkbox .uni-checkbox-input {
		width: 15px;
		height: 15px;
		position: relative;
	}
	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		font-size: 14px;
	}
	.loadingicon {
		height: 100vh;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
	}
	.icon-xiangyou {
		font-size: 22rpx;
	}
	.radio-flex {
		flex: 1;
		display: flex;
		justify-content: space-around;
	}
	.location {
		text-align: center;
	}
	// #ifdef MP
	checkbox-group {
		display: inline-block;
	}
	// #endif
	.setAgCount{
		::v-deep table{
			border:  1px solid #DDD;
			border-bottom: none;
			border-right: none;
		}
		::v-deep td, th {
		    padding: 5rpx 10rpx;
		    border-bottom: 1px solid #DDD;
			border-right:  1px solid #DDD;
		}
	}
</style>
